<template>
	<view class="my_container">
		<CustomNavbarTwo :title="pageTitle" />
		<view class="my_container_body">
			<view class="my_container_body_head"></view>
			<view class="my_container_body_body">
				<view class="show" @click="showAll">{{ isManageMode ? '完成' : '管理' }}</view>
				<!-- 收藏列表 -->
				<view v-if="collectList.length > 0">
					<view class="item" v-for="(item, index) in collectList" :key="item.userId">
						<checkbox class="check_item" v-if="isManageMode" :value="item.userId"
							:checked="selectedItems.includes(item.userId)" @click="toggleSelectItem(item.userId)" />
						<view @tap="lookMarket(item.userId)" class="show_time">
							<view class="item-head">
								<image class="item-img" :src="item.avatar" mode="aspectFill"></image>
								<view class="item-info">
									<view class="item-title">
										<text class="title-text">{{ item.nickName }}</text>
										<text class="member-tag">{{ item.vipTypeName }}</text>
										<view class="quxiaoguanzhu" @click="selectOne(item.userId)">取消关注</view>
									</view>
									<view class="item-details">
										<text class="item-meta">联系方式: ***********</text>
									</view>
									<view class="abc">
										<image class="view_imag" src="../../static/imags/ditu.png"></image>
										<text
											class="abc_o">地址:{{ item.province == null ? '' : item.province }}{{ item.city == null ? '' : item.city }}</text>
										<!-- <text class="abc_t">距您: {{ item.distance }}公里</text> -->
									</view>
								</view>
							</view>
							<view class="item-footer">
								<text class="meta">发布 {{ item.pubInfoCount }}</text>
								<text class="meta">浏览 {{ item.watchCount }}</text>
								<text class="meta">粉丝 {{ item.fansCount }}</text>
								<text class="meta">点赞 {{ item.likeCount }}</text>
							</view>
						</view>
					</view>
				</view>
				<view v-show="show" style="height: 70rpx; line-height: 70rpx; width: 100%">
					<u-loadmore icon :status="status" />
				</view>
				<view style="height: 20rpx"></view>
			</view>
		</view>
		<!-- 底部操作栏 -->
		<view v-if="isManageMode && collectList.length > 0" class="footer-toolbar">
			<checkbox :checked="isAllSelected" @click="toggleSelectAll">全选</checkbox>
			<button class="delete-btn" @click="batchDelete">批量取消</button>
		</view>
	</view>
</template>
<script>
	import CustomNavbarTwo from '@/components/CustomNavbarTwo.vue';
	const api = require('../../util/api.js');
	export default {
		components: { CustomNavbarTwo },
		data() {
			return {
				pageTitle: '我的关注',
				isManageMode: false, // 管理模式切换
				pageSize: 20,
				pageNum: 1,
				total: 0,
				status: 'loading',
				show: true,
				lat: '32',
				lon: '122',
				collectList: [],
				selectedItems: [] // 被选中的ID
			};
		},
		computed: {
			// 判断是否全选
			isAllSelected() {
				return this.selectedItems.length === this.collectList.length && this.collectList.length > 0;
			}
		},
		onPullDownRefresh() {
			// 下拉刷新的处理逻辑
			this.pageNum = 1;
			this.status = 'loading';
			this.collectList = [];
			this.getData();
		},
		onReachBottom() {
			if (this.total == this.collectList.length) {
				this.status = 'nomore';
				this.show = true;
				return;
			}
			this.show = true;
			this.pageNum++;
			this.getData();
		},
		onLoad() {
			this.getData();
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ['shareAppMessage', 'shareTimeline']
			});
		},
		methods: {
			lookMarket(id) {
				uni.navigateTo({
					url: '/page/market/index?id=' + id
				});
			},
			getData() {
				const query = {
					pageSize: this.pageSize,
					pageNum: this.pageNum
				};
				this.$https.post(this.$api.myCollectPubUser, query).then(async (res) => {
					if (res.code === 200) {
						if (this.pageNum == 1) {
							this.collectList = [];
						}
						const data = res.data;
						this.total = res.total;
						this.pageTitle = '我的关注（' + res.total + ')'
						if (this.total == 0) {
							this.status = 'nomore';
							this.show = true;
						} else {
							this.collectList = [...this.collectList, ...data];
							this.show = false;
						}
						// this.collectList.forEach((item, index) => {
						// 	this.getDistance(item.lat, item.lon, index);
						// });
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						this.show = false;
					}
				});
			},
			//获取距离
			getDistance(lat, lon, index) {
				let param = {
					latFrom: lat,
					lonFrom: lon,
					latTo: uni.getStorageSync('address') ? JSON.parse(uni.getStorageSync('address')).lat : '32',
					lonTo: uni.getStorageSync('address') ? JSON.parse(uni.getStorageSync('address')).lon : '122'
				};
				this.$https.post(this.$api.getDistance, param).then((res) => {
					if (res.code === 200) {
						this.collectList[index].distance = parseInt((res.data * 1) / 1000);
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			// 切换管理模式
			showAll() {
				this.isManageMode = !this.isManageMode;
				if (!this.isManageMode) this.selectedItems = [];
			},
			// 选中或取消选中单个
			toggleSelectItem(id) {
				const index = this.selectedItems.indexOf(id);
				if (index > -1) {
					this.selectedItems.splice(index, 1);
				} else {
					this.selectedItems.push(id);
				}
			},
			// 全选或取消全选
			toggleSelectAll() {
				if (this.isAllSelected) {
					this.selectedItems = [];
				} else {
					this.selectedItems = this.collectList.map((item) => item.userId);
				}
				console.log(this.selectedItems);
			},
			//取消删除单个
			selectOne(id) {
				this.selectedItems = [];
				this.selectedItems.push(id);
				this.batchDelete();
			},
			// 批量删除被选中的
			batchDelete() {
				if (this.selectedItems.length === 0) {
					uni.showToast({ title: '请选择要删除的', icon: 'none' });
					return;
				}
				const data = {
					operateType: '4',
					processType: '0',
					pubInfoIds: this.selectedItems
				};
				this.$https.post(this.$api.favoriteAndCollect, data).then((res) => {
					if (res.code === 200) {
						this.pageNum = 1;
						this.getData();
						if (this.selectedItems.length == 1) {
							uni.showToast({ title: '取关成功', icon: 'success' });
						} else {
							uni.showToast({ title: '批量取关成功', icon: 'success' });
						}
						this.selectedItems = [];
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	.my_container {
		width: 100%;
		min-height: 1624rpx;

		.my_container_body {
			width: 750rpx;
			background: linear-gradient(180deg, #ddffde 0%, #f6f6f6 29%, #f6f6f6 100%);
			min-height: 1624rpx;

			.my_container_body_head {
				width: 686rpx;
				height: 176rpx;
			}

			.my_container_body_body {
				width: 686rpx;
				margin-left: 32rpx;

				.show {
					width: 60rpx;
					height: 60rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #19e820;
					line-height: 60rpx;
					text-align: right;
					margin-left: 626rpx;
				}

				.manage-toolbar {
					display: flex;
					justify-content: space-between;
					margin: 20rpx 0;
				}

				.item {
					align-items: center;
					margin-bottom: 20rpx;
					background: #ffffff;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					width: 686rpx;
					height: 264rpx;
					display: flex;

					.check_item {
						margin-left: 10rpx;
					}

					.show_time {
						width: 100%;
						margin-left: 28rpx;

						.item-head {
							display: flex;
							height: 136rpx;
							margin-top: 34rpx;

							.item-img {
								width: 104rpx;
								height: 104rpx;
								border-radius: 50%;
							}

							.item-info {
								padding-left: 24rpx;
								height: 48rpx;

								.item-title {
									display: flex;
									justify-content: space-between;

									.title-text {
										font-size: 32rpx;
										color: #333333;
										font-weight: bold;
										height: 48rpx;
										line-height: 48rpx;
									}

									.member-tag {
										font-size: 24rpx;
										color: red;
										margin-left: 10rpx;
										border: 1rpx solid red;
										font-weight: 400;
										font-size: 20rpx;
										color: #ed6e3e;
										line-height: 32rpx;
										text-align: center;
										padding: 0 10rpx;
										height: 32rpx;
										border-radius: 100rpx 100rpx 100rpx 100rpx;
										border: 1rpx solid #ed6e3e;
										margin-top: 8rpx;
									}

									.quxiaoguanzhu {
										margin-left: 20rpx;
										width: 128rpx;
										height: 48rpx;
										background: rgba(255, 255, 255, 0);
										border-radius: 100rpx 100rpx 100rpx 100rpx;
										border: 1rpx solid #dadada;
										font-weight: 400;
										font-size: 22rpx;
										color: #777777;
										line-height: 48rpx;
										text-align: center;
									}
								}

								.item-details {
									font-size: 24rpx;
									color: #666;
									margin: 10rpx 0;
									width: 300rpx;
									height: 34rpx;
									line-height: 34rpx;
								}

								.abc {
									display: flex;
									font-weight: 400;
									font-size: 24rpx;
									color: #777777;
									height: 34rpx;

									.view_imag {
										width: 28rpx;
										height: 28rpx;
										margin-top: 3rpx;
									}

									.abc_o {
										height: 34rpx;
										line-height: 34rpx;
										width: 214rpx;
										height: 34rpx;
									}

									.abc_t {
										width: 214rpx;
										height: 34rpx;
										height: 34rpx;
										line-height: 34rpx;
										text-align: right;
									}
								}
							}
						}

						.item-footer {
							height: 44rpx;
							display: flex;
							justify-content: space-between;
							margin-top: 26rpx;

							.meta {
								width: 25%;
								height: 44rpx;
								line-height: 44rpx;
								margin-left: 28rpx;
								font-size: 24rpx;
								color: #999;
							}
						}
					}
				}
			}
		}

		.footer-toolbar {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #ffffff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 30rpx;
			border-top: 1px solid #ddd;

			.checkbox {
				font-size: 28rpx;
				color: #333;
			}

			.delete-btn {
				background-color: #ff4d4f;
				color: #ffffff;
				padding: 10rpx 30rpx;
				border-radius: 8rpx;
				font-size: 28rpx;
			}
		}
	}
</style>